<template>
  <div class="blog-container">
    <el-backtop :right="100" :bottom="100" />
    <div class="personal-settings">
      <div class="personal-settings-content" @click="togglePersonalPage">
        <img :src="avatar" alt="个人头像" class="avatar" />
        <span class="welcome-text">欢迎，{{ username }}</span>
        <span class="settings-icon">⚙️</span>
      </div>
    </div>

    <div v-if="showPersonalPage" class="personal-page">
      <div class="personal-page-content">
        <h2>个人设置</h2>
        <button class="close-button" @click="togglePersonalPage">×</button>
        <div class="settings-form">
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="username" />
          </div>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" v-model="email" />
          </div>
          <div class="form-group">
            <label for="bio">个人简介</label>
            <textarea id="bio" v-model="bio"></textarea>
          </div>
          <button class="save-button" @click="saveSettings">保存设置</button>
        </div>
      </div>
    </div>

    <div v-if="showRealNamePage" class="personal-page">
      <div class="personal-page-content">
        <h2>个人设置</h2>
        <button class="close-button" @click="toggleRealNamePage()">×</button>
        <div class="settings-form">
          <div class="form-group">
            <label for="username">姓名</label>
            <input  v-model="realName" />
          </div>
          <div class="form-group">
            <label for="email">身份证号码</label>
            <input  v-model="realCode" />
          </div>
          <button class="save-button" @click="submitRealName">提交实名</button>
        </div>
      </div>
    </div>

    <header class="blog-header">
      <nav class="header-nav">
        <a href="#" style="color: black;" class="nav-link" @click.prevent="showAddBlogPage(false)">首页</a>
        <a href="#" style="color: black;" class="nav-link">联系</a>
        <a href="#" style="color: black;" class="nav-link add-blog-btn" @click.prevent="showAddBlogPage(true)">
          添加博客
        </a>
        <a href="#" style="color: black;" class="nav-link" @click="$router.replace('/login')">登录界面</a>
      </nav>
      <div class="header-content">
        <!-- <h1 style="color: black;">生活琐事</h1> -->
        <img src="https://bu.dusays.com/2024/12/07/6753a8bf7dffe.png" /><br>
        <p style="color: black;">一个关于技术、设计和生活的博客</p>
      </div>
    </header>

    <!-- 添加博客页面 -->
    <div v-if="showAddBlog" class="add-blog-page">
      <div class="add-blog-content">
        <h2>添加新博客</h2>
        <button class="close-button" @click="showAddBlog = false">×</button>
        <MarkdownEditor @addBlog="updateBlogs" />
      </div>
    </div>

    <div class="content-wrapper" v-if="!showAddBlog">
      <aside class="sidebar">
        <div class="profile-card">
          <img :src="avatar" alt="博主头像" class="profile-image" />
          <h2>{{ username }}</h2>
          <p>{{ bio }}</p>
          <div class="social-links">
            <a href="#" aria-label="GitHub">
              <GithubIcon />
            </a>
            <a href="#" aria-label="Twitter">
              <TwitterIcon />
            </a>
            <a href="#" aria-label="LinkedIn">
              <LinkedinIcon />
            </a>
          </div>
        </div>

        <div class="site-info">
          <h3>关于本站</h3>
          <p>
            创建于2024年，专注于生活琐事分享、操作简便、个性化定制的个人博客系统，以满足用户对于记录和分享个人生活的需求。
          </p>
          <ul>
            <li>
              <FileTextIcon />
              文章: {{ blogNumber }}
            </li>
            <li>
              <UsersIcon />
              访客: 10k+
            </li>
            <li>
              <MessageSquareIcon />
              评论: 500+
            </li>
          </ul>
        </div>
      </aside>

      <main class="blog-content">
        <article v-for="post in blogPosts" :key="post.id" class="blog-post">
          <h2>{{ post.blogTitle }}</h2>
          <p class="post-meta">
            <CalendarIcon />
            {{ post.sendDate.replace('T', ' ') }}
            <UserIcon />
            {{ post.userName }}
          </p>
          <p>
            {{ post.blogDesc }}
          </p>
          <a href="#" @click="$router.push(`/blogdetail/${post.blogID}`,)" class="read-more">
            阅读更多
            <ArrowRightIcon />
          </a>
        </article>
        <el-button type="primary" @click="getMore" style="margin-left: 45%">获取更多</el-button>
      </main>
    </div>

    <footer class="blog-footer">
      <p>&copy; 2024 生活琐事Blog. 保留所有权利.</p>
    </footer>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import MarkdownEditor from './MarkDownEditor.vue'
import request from '@/utils/request'
import { downloadFile } from '@/utils/api'

import {
  GithubIcon,
  TwitterIcon,
  LinkedinIcon,
  FileTextIcon,
  UsersIcon,
  MessageSquareIcon,
  CalendarIcon,
  UserIcon,
  TagIcon,
  ArrowRightIcon
} from 'lucide-vue-next'
import { ElMessage } from 'element-plus'

export default {
  components: {
    GithubIcon,
    TwitterIcon,
    LinkedinIcon,
    FileTextIcon,
    UsersIcon,
    MessageSquareIcon,
    CalendarIcon,
    UserIcon,
    TagIcon,
    ArrowRightIcon,
    MarkdownEditor
  },
  setup() {
    const showPersonalPage = ref(false)
    const showRealNamePage = ref(false)
    const username = ref('站长')
    const email = ref('admin@example.com')
    const bio = ref('热爱技术、设计和创新的全栈开发者')
    const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
    const showAddBlog = ref(false)
    const realName=ref()
    const realCode=ref()

    // 当前页数
    const currentPage = ref(1)

    // 文章列表
    const blogPosts = ref([])

    // 文章数量
    const blogNumber = ref(0)

    function togglePersonalPage() {
      showPersonalPage.value = !showPersonalPage.value
    }

    function toggleRealNamePage() {
      showRealNamePage.value = !showRealNamePage.value
    }

    // 获取个人信息
    function getUserInfo() {
      request.get('/user/getUserInfo').then(async (response) => {
        if (response.code === '200') {
          username.value = response.data.name
          email.value = response.data.userEmail
          bio.value = response.data.description
          try {
            avatar.value = await downloadFile(response.data.avatar)
            console.log(avatar.value)
          } catch (error) {
            avatar.value = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
          }
        } else {
          ElMessage.error(response.msg)
        }
      })
    }

    function showAddBlogPage(value) {
      showAddBlog.value = value
    }

    function saveSettings() {
      console.log('Settings saved:', {
        username: username.value,
        email: email.value,
        bio: bio.value
      })
      request
        .post('/user/updateUser', {
          userEmail: email.value,
          name: username.value,
          description: bio.value
        })
        .then((response) => {
          if (response.code === '200') {
            ElMessage.success('设置已保存')
          } else {
            ElMessage.error(response.msg)
          }
        })
      togglePersonalPage()
    }

    // 分页获取博客
    function getAllPosts() {
      request
        .get('/blog/getBlogs', {
          params: {
            currentPage: currentPage.value
          }
        })
        .then((response) => {
          if (response.code === '200') {
            blogPosts.value = [...blogPosts.value, ...response.data]
            if (response.data.length === 0) {
              ElMessage.warning('没有更多博客了')
              currentPage.value--
            }
          } else {
            ElMessage.error(response.msg)
          }
        })
    }

    // 更新主页博客列表
    function updateBlogs() {
      currentPage.value = 1
      blogPosts.value = []
      getAllPosts(currentPage.value)
    }

    // 获取更多博客
    function getMore() {
      currentPage.value++
      getAllPosts(currentPage.value)
    }

    // 获取文章数量
    function getBlogNumber() {
      request.get('/blog/getBlogNumber').then((response) => {
        if (response.code === '200') {
          blogNumber.value = response.data
        } else {
          ElMessage.error(response.msg)
        }
      })
    }

    function submitRealName(){
      request.get('/user/realNameRegister',{
        params:{
          realName:realName.value,
          identificationNumber:realCode.value
        }
      }).then((response)=>{
        if(response.code==='200')
        {
          ElMessage.success("实名认证成功")
        }
      })
    }

    function ifRealName() {
      request.get('/user/isRealName').then((response) => {
        if (response.code === '200') {
          if (!response.data) {
            ElMessage.error('请先实名认证')
            toggleRealNamePage();
          }
        }
      })
    }

    // 使用onMounted钩子在组件挂载后调用getAllPosts
    onMounted(() => {
      getAllPosts()
      getUserInfo()
      getBlogNumber()
      ifRealName()
    })

    return {
      showPersonalPage,
      showRealNamePage,
      username,
      email,
      bio,
      avatar,
      blogNumber,
      showAddBlog,
      blogPosts,
      realName,
      realCode,
      togglePersonalPage,
      toggleRealNamePage,
      submitRealName,
      saveSettings,
      showAddBlogPage,
      getMore,
      updateBlogs
    }
  }
}
</script>

<style scoped>
.blog-container {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: #2d3748;
  background: url('https://bu.dusays.com/2024/12/06/67531c0142bad.png') no-repeat center center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.personal-settings {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  transition: all 0.3s ease;
}

.personal-settings:hover {
  transform: scale(1.07);
}

.personal-settings-content {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 30px;
  padding: 8px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.personal-settings-content:hover {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.personal-settings .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
  border: 2px solid #667eea;
}

.welcome-text {
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
}

.settings-icon {
  margin-left: 12px;
  font-size: 18px;
}

.personal-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.personal-page-content {
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.personal-page-content h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #2d3748;
  font-size: 24px;
  text-align: center;
}

.close-button {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: #718096;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-button:hover {
  color: #2d3748;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 5px;
  color: #4a5568;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}

.form-group textarea {
  height: 100px;
  resize: vertical;
}

.save-button {
  background-color: #667eea;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.save-button:hover {
  background-color: #5a67d8;
}

@media (max-width: 768px) {
  .personal-settings {
    top: 10px;
    right: 10px;
  }

  .personal-settings-content {
    padding: 6px 12px;
  }

  .personal-settings .avatar {
    width: 30px;
    height: 30px;
  }

  .welcome-text {
    font-size: 12px;
  }

  .settings-icon {
    font-size: 16px;
  }

  .personal-page-content {
    padding: 20px;
  }
}

.blog-header {
  background: url('https://bu.dusays.com/2024/12/06/67531c5a627a5.png') no-repeat center center;
  color: white;
  padding: 1rem 1rem;
  text-align: center;
}

.header-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  margin: 0 0.5rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: white;
}

.header-content h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.header-content p {
  font-size: 1.1rem;
  margin-top: 0.5rem;
  opacity: 0.9;
}

.content-wrapper {
  display: flex;
  flex-grow: 1;
  padding: 2rem;
  gap: 2rem;
}

.sidebar {
  flex: 1;
  max-width: 300px;
}

.profile-card,
.site-info {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  transition: transform 0.3s ease;
}

.site-info:hover {
  transform: scale(1.01);
}

.profile-image {
  width: 15vh;
  height: 15vh;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: block;
}

.profile-card {
  background-color: rgba(255, 255, 255, 0.6);
  transition: transform 0.3s ease;
}

.profile-card:hover {
  transform: scale(1.01);
}

.profile-card h2 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.profile-card p {
  text-align: center;
  color: #718096;
  margin-bottom: 1rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-links a {
  color: #4a5568;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #667eea;
}

.site-info h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.site-info ul {
  list-style-type: none;
  padding: 0;
}

.site-info li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.site-info li svg {
  margin-right: 0.5rem;
}

.blog-content {

  flex: 3;
}

.blog-post {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.blog-post:hover {
  transform: scale(1.01);
}

.blog-post h2 {
  margin-top: 0;
  color: #2d3748;
  font-size: 1.8rem;
}

.post-meta {
  display: flex;
  align-items: center;
  color: #718096;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.post-meta svg {
  margin-right: 0.25rem;
  margin-left: 1rem;
}

.post-meta svg:first-child {
  margin-left: 0;
}

.read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.read-more:hover {
  color: #764ba2;
}

.read-more svg {
  margin-left: 0.5rem;
}

.blog-footer {
  text-align: center;
  padding: 2rem;
  background-color: #2d3748;
  color: white;
  margin-top: auto;
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }

  .sidebar {
    max-width: none;
  }

  .blog-header {
    padding: 1.5rem 1rem;
  }

  .header-content h1 {
    font-size: 2rem;
  }

  .header-content p {
    font-size: 1rem;
  }
}

@media screen and (prefers-color-scheme:dark) {
  .personal-settings-content {
    display: flex;
    align-items: center;
    background-color: rgba(124, 124, 124, 0.9);
    border-radius: 30px;
    padding: 8px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .personal-page-content {
    background-color: rgba(124, 124, 124);
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  .profile-card {
    background-color: rgba(124, 124, 124, 0.6);
    transition: transform 0.3s ease;
  }

  .site-info {
    background-color: rgba(124, 124, 124, 0.6);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    transition: transform 0.3s ease;
  }

  .blog-post {
    background-color: rgba(124, 124, 124, 0.6);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }
}
</style>
